import {
  Card,
  Image,
  Flex,
  Rate,
  Tag,
  Button,
  Selector,
  StickyPosition,
  Dialog,
  Grid,
  GridItem,
  Toast,
} from 'react-vant';
import NavBtnBattle from '../navBtnBattle';
import styles from '@/pages/battle/index.less';
import { history } from 'umi';
export default (props) => {
  /**
   * nav切换
   * @param val
   */
  const changeOption = (val: string[]) => {
    if (val && val.length > 0) {
      props.setOptionVal(val);
      if (val[0] == '5') {
        Dialog.confirm({
          title: '撤退',
          message: '确认要撤退么，撤退有几率失败',
        })
          .then(() => {
            props.setOptionVal(['1']);
            history.push('/');
          })
          .catch(() => {
            props.setOptionVal(['1']);
          });
      }
    } else if (
      props.optionVal &&
      props.optionVal.length > 0 &&
      val.length == 0
    ) {
      props.setOptionVal(props.optionVal);
    } else {
      props.setOptionVal(['1']);
    }
  };

  return (
    <>
      <Selector
        style={{
          '--rv-selector-border-radius': '100px',
          '--rv-selector-checked-border': 'solid var(--adm-color-primary) 1px',
          '--rv-selector-padding': '8px 24px',
        }}
        showCheckMark={false}
        onChange={changeOption}
        value={props.optionVal}
        options={[
          {
            label: '战斗',
            value: '1',
            disabled: props.curRound !== 'user',
          },
          {
            label: '道具',
            value: '2',
            disabled: props.curRound !== 'user',
          },
          {
            label: '捕捉',
            value: '3',
            disabled: props.curRound !== 'user',
          },
          {
            label: '精灵',
            value: '4',
            disabled: props.curRound !== 'user',
          },
          {
            label: '撤退',
            value: '5',
            disabled: props.curRound !== 'user',
          },
        ]}
      />
    </>
  );
};
